<div>快捷键及使用说明</div>
<div id="info-global" class="info-topic">
  <div class="info-topic-header">全局快捷键</div>
  <div class="info-topic-content">
    <table>
      <tr>
        <td>CTRL+L</td>
        <td>加载文件</td>
      </tr>
      <tr>
        <td>CTRL+R</td>
        <td>刷新 (Chrome 快捷键)</td>
      </tr>
    </table>
  </div>
</div>
<div id="info-common-graph-view" class="info-topic">
  <div class="info-topic-header">SON图</div>
  <div class="info-topic-content">
    <table>
      <tr>
        <td>r</td>
        <td>重新布局</td>
      </tr>
      <tr>
        <td>n</td>
        <td>显示所选节点在下一个pass中的位置</td>
      </tr>
      <tr>
        <td>b</td>
        <td>显示所选节点在上一个pass中的位置</td>
      </tr>
      <tr>
        <td>h</td>
        <td>显示鼠标悬停节点的历史记录</td>
      </tr>
      <tr>
        <td>a</td>
        <td>选择所有节点</td>
      </tr>
      <tr>
        <td>/</td>
        <td>选择搜索框</td>
      </tr>
      <tr>
        <td>i</td>
        <td>显示所选节点的输入节点</td>
      </tr>
      <tr>
        <td>o</td>
        <td>显示所选节点的输出节点</td>
      </tr>
      <tr>
        <td>s</td>
        <td>隐藏所选节点</td>
      </tr>
      <tr>
        <td>u</td>
        <td>隐藏所有未选择节点</td>
      </tr>
      <tr>
        <td>UP</td>
        <td>选择所有输入节点</td>
      </tr>
      <tr>
        <td>DOWN</td>
        <td>选择所有输出节点</td>
      </tr>
      <tr>
        <td>1-9</td>
        <td>选择输入节点 1-9</td>
      </tr>
      <tr>
        <td>CTRL+1-9</td>
        <td>显示/隐藏输入边 1-9</td>
      </tr>
      <tr>
        <td>c/Alt+c</td>
        <td>选择所有control输出/输入节点</td>
      </tr>
      <tr>
        <td>e/Alt+e</td>
        <td>选择所有effect输出/输入节点</td>
      </tr>
      <tr>
        <td>v/Alt+v</td>
        <td>选择所有value输出/输入节点</td>
      </tr>
      <tr>
        <td>Shift</td>
        <td>按住以进行多选</td>
      </tr>
    </table>
  </div>
</div>
<div id="info-graph-search" class="info-topic">
  <div class="info-topic-header">搜索</div>
  <div class="info-topic-content">
    <table>
      <tr>
        <td>ENTER</td>
        <td>根据正则表达式搜索节点。是否包含不可见节点取决于是否选中"only visible"</td>
      </tr>
      <tr>
        <td>CTRL+ENTER</td>
        <td>根据正则表达式搜索节点。总是包含不可见节点</td>
      </tr>
    </table>
  </div>
</div>
<div id="info-graph-search" class="info-topic">
  <div class="info-topic-header">边</div>
  <div class="info-topic-content">
    <table>
      <tr>
        <td>紫色</td>
        <td>root</td>
        <td><span style="display:inline-block; width:50px; height:4px; background-color:#9b3ea3;"></span></td>
      </tr>
      <tr>
        <td>黑色</td>
        <td>control</td>
        <td><span style="display:inline-block; width:50px; height:4px; background-color:#080808;"></span></td>
      </tr>
      <tr>
        <td>红色</td>
        <td>effect</td>
        <td><span style="display:inline-block; width:50px; height:4px; background-color:#ff2323;"></span></td>
      </tr>
      <tr>
        <td>蓝色</td>
        <td>value</td>
        <td><span style="display:inline-block; width:50px; height:4px; background-color:#2e47d6;"></span></td>
      </tr>
      <tr>
        <td>绿色</td>
        <td>frame-state</td>
        <td><span style="display:inline-block; width:50px; height:4px; background-color:#2ec700;"></span></td>
      </tr>
    </table>
  </div>
</div>